<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true">
				<swiper-item v-for="item of list">
					<view class="swiper-item" style="color: #000000;">
						<videoPlayer :video="item"></videoPlayer>
					</view>
					<view class="left-box">
						<listLeft></listLeft>
					</view>
					<view class="right-box">
						<listRight></listRight>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from "./video-player.vue"
	import listLeft from "./list-left.vue"
	import listRight from "./list-right.vue"
	export default {
		components:{
			videoPlayer,
			listLeft,
			listRight
		},
		data() {
			return {
				list:[
					{
						id:1,
						src:require("../static/video/1-1.mp4")
					},
					{
						id:2,
						src:require("../static/video/1-2.mp4")
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.videoList {
		height: 100%;
		width: 100%;
	}
	.swiper-box {
		height: 100%;
		width: 100%;
	}
	.swiper {
		height: 100%;
		width: 100%;
	}
	.swiper-item {
		height: 100%;
		width: 100%;
		z-index: 19;
	}
	.left-box{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
		color: #C0C0C0;
	}
	.right-box{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
		color: #C0C0C0;
	}
</style>
